<!DOCTYPE html>
<html lang="en">
<#include "/element-ui-tpls/head.html"/>
<body>
<div id="app" v-cloak>
    <el-container style="height: 100%; border: 1px solid #eee;">
        <#include "/element-ui-tpls/aside.html"/>
        <el-main>
            <span>>> war包上传</span><hr>
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true">
                    <el-form-item>
                        <el-upload action="/api/wars" :limit="1" :file-list="fileList"
                                :on-success="handleUploadSuccess"
                                :on-error="handleUploadError">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" border style="width: 100%; margin-top: 10px;"  class="tableLimit">
                <el-table-column prop="filename" label="文件名"></el-table-column>
                <el-table-column prop="filePath" label="文件路径" width="500"></el-table-column>
                <el-table-column prop="uploader" label="上传者"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
            </el-table>
            <div style="text-align: right;">
                <el-pagination background layout="prev, pager, next"
                               :total="total" :page-size="pageSize" @current-change="changePage">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
</div>

<#include "/element-ui-tpls/script.html"/>
<script>
    new Vue({
        el: '#app',
        data: {
            dialogFormVisible: false,
            tableData: [],
            total: 0,
            pageSize: __PAGE_SIZE,
            apis: {
                rest: '/api/wars',
            },
            fileList: []
        },
        methods: {
            handleUploadSuccess(response, file, fileList) {
                this.fileList = [];
                this.doQuery();
            },
            handleUploadError(err, file, fileList) {
                console.error(err);
            },
            changePage: function(currPage) {
                this.doQuery(currPage);
            },
            doQuery: function(page) {
                var vm = this;
                var params =  {page: page ? page : 1, size: vm.pageSize};
                axios.get(this.apis.rest, {
                    params: params
                }).then(function (data) {
                    vm.tableData = data.content;
                    vm.total = data.totalElements;
                });
            }
        },
        mounted: function() {
            this.doQuery();
        },
    });
</script>
</body>
</html>